<style lang="scss" rel="stylesheet/scss">
    .user-comment {
        .isweb-top {
            margin-top: 45px;
        }
        .comment-content {
            display: flex;
            // margin-top: 45px;
            padding: 0.5rem 1rem;
            .left {
                flex: 0 0 3rem;
                img {
                    width: 3rem;
                    height: 3rem;
                    border-radius: 50%;
                    border: 1px solid #f5f5f5;
                }
            }
            .right {
                flex:1;
                margin-left:0.5rem;
                color: #333;
                .name {
                    line-height: 2.2rem;
                }
                .time {
                    color: #666;
                }
            }
        }
        .com-txt {
            color: #333;
            margin:0.5rem 1rem; 
            line-height: 1.3rem;
        }
    }
</style>
<template>
    <div class="user-comment">
        <jheader :title="numText" :hasjubao="hasjubao" :id="commentId" v-if="!isapp"></jheader>
        <div class="comment-content" :class="{'isweb-top':!isapp}">
            <div class="left">
                <img :src="commentInfo.head_icon" alt="">
            </div>
            <div class="right">
                <p class="font-big-normal name">{{commentInfo.member_name}}</p>
                <p class="font-small time">
                    {{commentInfo.time}}
                    <span class="iconfont icon-pinglun div-right" style="margin-left:1rem;" @click="commentInputShow=true"></span>
                    <span class="iconfont icon-zan div-right" :class="{'font-red':commentInfo.is_zan === 1}" @click="commentZan"> <span style="color:#999;"> {{commentInfo.zans}}</span></span>
                </p>
            </div>
        </div>
        <p class="font-normal com-txt">{{commentInfo.content}}</p>
        <van-tabs v-model="active" @click="onTabClick">
            <van-tab title="热门回复"></van-tab>
            <van-tab title="最新回复"></van-tab>
        </van-tabs>
        <j-comment-list :list="commentInfo.sub" :ishot="ishot" :showMore="false" @getCommentList="fetchData"></j-comment-list>
        <div>
            <j-comment-input v-if="commentInputShow" @bindClose="commentInputShow=false" @bindSendMsg="bindSendMsg"></j-comment-input>
        </div>
    </div>
</template>

<script>
    import jheader from "components/Header"
    import jCommentInput from "components/NewsContent/CommentInput"
    import jCommentList from "components/NewsContent/CommentList"
    export default {
        components: {
            jheader,
            jCommentInput,
            jCommentList
        },
        
        data () {
            return {
                num:1,
                hasjubao: true,
                active: 0,
                commentInputShow: false,
                commentId: '',
                unionid:sessionStorage.getItem('unionid'),
                commentInfo:{},
                ishot: true,
                isapp: eval(localStorage.getItem('isapp'))
            }
        },
        created() {
            if(!this.$route.params.id) return
            this.commentId = this.$route.params.id
            this.fetchData()
        },
        mounted () {
            
        },
        computed: {
            numText(val) {
                return `${this.num}条回复`
            }
        },
        methods: {
            fetchData () {
                if(this.ishot) {
                    xmview.getKey(`detail-reply-hot-comment/${this.commentId}?unionid=${this.unionid}`,this.unionid).then(key => {
                    this.$fetch(`${xmconfig.API_YI}/v1/detail-reply-hot-comment/${this.commentId}`,{unionid:this.unionid,key:key}).then(res => {
                        if(res.code === 200) {
                            this.commentInfo = res.datas[0]
                        }
                    })
                })
                }else {
                    xmview.getKey(`detail-reply-comment/${this.commentId}?unionid=${this.unionid}`,this.unionid).then(key => {
                        this.$fetch(`${xmconfig.API_YI}/v1/detail-reply-comment/${this.commentId}`,{unionid:this.unionid,key:key}).then(res => {
                            if(res.code === 200) {
                                this.commentInfo = res.datas[0]
                            }
                        })
                    })
                }
                
            },
            onTabClick(index, title) {
                if(index === 1) {
                    this.ishot = false
                }else {
                    this.ishot = true
                }
                this.fetchData()
            },
            commentZan() {
                xmview.getKey(`detail-zan-comment/${this.commentId}?unionid=${this.unionid}`,this.unionid).then(key => {
                    this.$fetch(`${xmconfig.API_YI}/v1/detail-zan-comment/${this.commentId}`,{unionid:this.unionid,key:key}).then(res => {
                        if(res.code === 200) {
                            xmview.showToast(res.msg)
                            this.fetchData()
                        }
                    })
                })
            },
            bindSendMsg(msg) {
                if(!msg) {
                    xmview.showToast('请输入评论')
                    return
                }
                xmview.getKey('detail-comment', this.unionid).then(key => {
                    let params = {
                        pid: this.commentId,
                        // info_id: this.info_id,
                        // info_type: this.info_type,
                        // info_member_id: this.info_member_id,
                        content: msg
                    }
                    this.$post(`${xmconfig.API_YI}/v1/detail-comment?unionid=${this.unionid}&key=${key}`,params).then(res => {
                        if(res.code === 200) {
                            this.commentInputShow = false
                            xmview.showToast(res.msg)
                            this.fetchData()
                        }
                    })
                })
            }
        }
    }
</script>

